<template>
  <div id="user-bar">
    <transition name="mask-fade">
      <div class="mask" v-if="visible" @click="close"></div>
    </transition>
    <transition name="user-slide">
      <div v-if="visible" class="user-bar-content">
        <div class="user-info" @click="lookUserInfo">
          <span class="user-avatar">
            <img :src="userAvatar"/>
          </span>
          <span class="user-name">{{userName}}</span>
        </div>
        <div class="list">
          <span class="item" @click="lookUserInfo">我的信息</span>
          <span class="item" @click="myCollect">我的收藏</span>
          <span class="item" @click="myMessage">我的消息</span>
          <span class="item" @click.prevent="login">{{loginTitle}}</span>
        </div>
      </div>
    </transition>
    <v-confirm v-model="showConfirm" title="确认提示" text="确认退出当前登录？" @confirm="toLoginOut"></v-confirm>
  </div>
</template>

<script type="text/ecmascript-6">
  import Modal from 'base/modal/modal'
  import Confirm from 'base/confirm/confirm'
  import {mapActions, mapGetters} from 'vuex'
  import {isLogin, checkLogin} from 'common/js/mixin'

  export default {
    name: 'UserBar',
    mixins: [isLogin, checkLogin],
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: this.value,
        userName: '欢迎您！请登录',
        userAvatar: require('./avatar.jpg'),
        userId: 0,
        loginTitle: '前去登录',
        showConfirm: false
      }
    },
    created() {
      this._getLogin(this.userInfo)
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      close() {
        this.visible = false
      },
      login() {
        if (this.isLogin) {
          this.confirmLoginOut()
        } else {
          this.toLogin()
        }
      },
      toLogin() {
        this.$router.push('/login')
      },
      toLoginOut() {
        this.LoginOut()
      },
      confirmLoginOut() {
        this.showConfirm = true
      },
      // 查看我的信息
      lookUserInfo() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$router.push({name: 'user', params: {username: this.userInfo.loginname}})
          }
        })
      },
      // 查看我的收藏
      myCollect() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$router.push('/my-collect')
          }
        })
      },
      // 查看我的消息
      myMessage() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.$router.push('/message')
          }
        })
      },
      _getLogin(val) {
        if (val.user_token) {
          this.userName = val.loginname
          this.userAvatar = val.avatar_url
          this.loginTitle = '退出登录'
        } else {
          this.userName = '欢迎您！请登录'
          this.userAvatar = require('./avatar.jpg')
          this.loginTitle = '前往登录'
        }
      },
      ...mapActions([
        'LoginOut',
        'showAlert'
      ])
    },
    mounted() {
      if (this.value) {
        this.visible = true
      }
    },
    watch: {
      userInfo(val) {
        this._getLogin(val)
        if (!val.user_token) {
          this.showAlert({
            content: '已退出当前登录'
          })
        }
      },
      value(val) {
        this.visible = val
      },
      // 双向绑定传事件给父组件
      visible(val) {
        this.$emit('input', val)
      }
    },
    components: {
      'v-modal': Modal,
      'v-confirm': Confirm
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #user-bar {
    .mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      background-color: $color-background-l;
      &.mask-fade-enter-active, &.mask-fade-leave-active {
        transition: all .5s;
      }
      &.mask-fade-enter, &.mask-fade-leave-to {
        opacity: 0;
      }
    }
    .user-bar-content {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: #ffffff;
      width: 220px;
      overflow: hidden;
      z-index: 999;
      display: flex;
      flex-direction: column;
      &.user-slide-enter-active, &.user-slide-leave-active {
        transition: all .5s;
      }
      &.user-slide-enter, &.user-slide-leave-to {
        transform: translate3d(-100%, 0, 0);
      }
      .user-info {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 15px 10px 5px 10px;
        flex: 0 0 100px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-align: center;
        font-size: 0;
        background: url("./user_bg.png") no-repeat;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        span {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &.user-avatar {
            flex: 0 0 50px;
            height: 50px;
            img {
              height: 50px;
              display: inline-block;
              border-radius: 50%;
            }
          }
          &.user-name {
            flex: 0 0 30px;
            height: 30px;
            font-size: $font-size-medium;
            line-height: 30px;
            margin-top: 0px;
            color: #333333;
          }
        }
      }
      .list {
        flex: 1;
        text-align: center;
        .item {
          display: inline-block;
          width: 90%;
          text-align: center;
          margin-top: 15px;
          box-sizing: border-box;
          border-radius: 1px;
          padding: 10px 0;
          cursor: pointer;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
          font-size: $font-size-medium;
          color: $color-text-bb;
        }
      }
    }
  }
</style>
